<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>疫苗分类管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form :model="queryParams" ref="queryParams" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="医院" prop="hospitalId">
        <el-select
          v-model="queryParams.hospitalId"
          placeholder="请输入医院关键词"
          filterable
          remote
          :remote-method="getHospitalList"
          :loading="hospitalLoading">
          <el-option
          @click.native="hospitalName = item.hospitalName"
            v-for="item in hospitalList"
            :key="item.hospitalName"
            :label="item.hospitalName"
            :value="item.hospitalId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类名" prop="vaccineSortName">
        <el-input
          :disabled="!queryParams.hospitalId"
          v-model="queryParams.vaccineSortName"
          placeholder="请输入分类名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button :disabled="!queryParams.hospitalId" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button :disabled="!queryParams.hospitalId" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!--修改对话框-->
    <el-row :gutter="12">
      <el-col :span="6">
        <el-button type="success"
                   icon="el-icon-plus" :disabled="!queryParams.hospitalId"
                   @click="addDialog">添加新分类</el-button>
      </el-col>
    </el-row>
    
    <!--表格列表-->
    <el-table :data="tableData">
      <el-table-column prop="hospitalName"
                       label="医院"></el-table-column>
      <el-table-column prop="vaccineSortName"
                       label="分类名"></el-table-column>
      <el-table-column align="center"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="success"
                     @click="getOne(scope.row)">修改</el-button>
          <el-button type="danger"
                     
                     @click="deleteItem (scope.row)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="queryParams.pageNum"
                   :page-size="queryParams.pageSize"
                   :page-sizes="[5, 10, 15, 20]"
                   :total="queryParams.total"
                   layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!--修改对话框-->
    <el-dialog :visible.sync="editFlag"
               :close-on-click-modal="false"
               title="修改用户信息">
      <el-form :rules="rules" ref="form">
        <el-form-item label="医院">
          <el-input v-model="form.hospitalName"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="分类名">
          <el-input v-model="form.vaccineSortName"
                    placeholder="分类名"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="editFlag = false">取 消</el-button>
        <el-button type="primary"
                   @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <!--添加对话框-->
    <el-dialog :visible.sync="addFlag"
               :close-on-click-modal="false"
               title="添加用户信息">
      <el-form :rules="rules" ref="form">
        <el-form-item label="医院名">
          <el-input v-model="hospitalName" disabled
                    placeholder="请输入医院名"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-input v-model="form.vaccineSortName"
                    placeholder="请输入分类"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="addFlag = false">取 消</el-button>
        <el-button type="primary"
                   @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {vagueHospitalList,vaccineSortQueryList,deleteVaccineSort, getOneVaccineSort, saveVaccineSort, updateVaccineSort,} from "../../api/api";

export default {
  data () {
    return {
      showSearch:true,//显示搜索框
      hospitalLoading:false,//医院模糊搜索mask
      addFlag: false, // 显示添加对话框的标记
      editFlag: false,
      tableData: [],
      pager: {
        current: 1,
        size: 5,
        total: 0
      },

       List: [],
      form: {
        hospitalName: '',
        vaccineSortName: '',

      },
      rules: {
        vaccineSortName: [
          { required: true, message: "分类名不能为空", trigger: "blur" }
        ],
      },
      hospitalName:"",
      hospitalList:[],
      queryParams:{
        pageNum:1,
        pageSize:5,
        hospitalName:null,
        vaccineSortName:null,
        hospitalId:null,
        
      },

    }
  },
  methods: {
    addDialog(){
      this.reset()
      if(this.queryParams.hospitalId==null)return;
      this.form.hospitalId = this.queryParams.hospitalId;
      this.addFlag = !this.addFlag;
    },
    reset(){
      this.form={
        id: 0,
        username: '',
        name: '',
        age: '',
        sex: '',
        idCard: '',
        phone: '',
        address: '',
      }
    },
    changeSex(){
      let sex = this.form.sex;
      return  this.form.sex = (sex == 0 ) ? '男' : '女'
    },
    getOne (row) {
      this.editFlag = !this.editFlag;
      getOneVaccineSort(row.id)
        .then((response) => {
          if (response.code === 200) {
            this.form = response.data;
          } else {
            this.$message.error("获取分类id为：" + row.id + "的接口出错")
          }
        });
    },
    deleteItem (row){

      this.$modal.confirm('是否确认删除分类编号为"' + row.id + '"的留言？')
       .then(function() {
        return deleteVaccineSort(row.id);
      }).then(() => {
        this.lists();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
      
    },

    update(){
      //前端校验,加钱才做
      //发送请求到后端
      
      updateVaccineSort(this.form)
        .then((response) => {
          if (response.code === 200){
            this.$message.success(response.msg);
            this.lists();
            this.editFlag = false
          }
          else{
            this.$message.error(response.msg);
          }
        });
    },
    save(){
      saveVaccineSort(this.form)
        .then((response) => {
          if (response.code === 200){
            this.$message.success(response.msg);
            this.lists();
            this.addFlag = false
          }
          else{
            this.$message.error(response.msg);
          }
        });
    },

    handleCurrentChange (val) {
      console.info("改变分页起始数据" + val);
      this.queryParams.pageNum = val;
      this.lists();
    },
    handleSizeChange (val) {
      console.info("改变每页显示的最大条数" + val);
      this.queryParams.pageSize = val;
      this.lists();
    },
    lists () {
      if(!this.queryParams.hospitalId) return;
      vaccineSortQueryList(this.queryParams)
        .then((response) => {
          if (response.code === 200) {
            this.$message.success(response.msg);
            this.tableData = response.rows;
            this.queryParams.total = response.total;
          }
          else {
            this.$message.error(response.msg)
          }
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.lists();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 医院名称远程搜索
    getHospitalList(key){
      // const key = this.queryParams.hospitalName;
      vagueHospitalList({key}).then(res=>{
        this.hospitalList=res.rows
        // this.hospitalName = res.rows[index].hospitalName
      })
    },
    setHospitalName(key,index){
      console.log(key,index);
    },
  },
  created () {
    this.lists(this.queryParams);
  }
}
</script>

<style>
.el-breadcrumb {
  padding-bottom: 12px;
}
.el-pagination {
  padding-top: 12px;
}
</style>
